import { useEffect, useMemo, useState } from "react";
import { Button } from "../../components";
import useToggleMark from "../hooks/toggle-mark-block";
import { Dropdown, MenuProps } from "antd";
import { useSlate } from "slate-react";
import CenterIcon from '../../assets/algin-center.svg';
import LeftIcon from '../../assets/algin-left.svg'
import RightIcon from '../../assets/algin-right.svg'

const list=[
  {
    "key": "left",
    "label": <Button icon={LeftIcon}></Button>
 },
  {
      "key": "center",
      "label":  <Button icon={CenterIcon}></Button>
  },
 
  {
      "key": "right",
      "label": <Button icon={RightIcon}></Button>
  },
 
]
export default () => {
  const { toggleBlockMark,markBlockValue } = useToggleMark();
  const[value,setValue]=useState<string>('left');
  const editor = useSlate();

  const items = useMemo(() => {
    return list.map((item: any) => {
      return {
        key: item.key,
        label: <span>{item.label}</span>
      };
    });
  }, []);

  const onClick: MenuProps['onClick'] = (e) => {
    setValue(e?.key)
    toggleBlockMark("style-textAlign", e?.key); 
  };

  useEffect(()=>{
      const currentValue=markBlockValue('style-textAlign')
      
      if(editor.selection){
        setValue(currentValue||'left');
      }
     
},[markBlockValue]);

  const currnetLabel=useMemo(()=>{
    return list.find((item)=>item.key===value)?.label
  },[value])
 
  return (
    <Dropdown
      menu={{ items,onClick }}
      placement="bottom"
      autoAdjustOverflow
      arrow={{ pointAtCenter: true }}
    >
      <Button style={{width:60}} onClick={(e) => e.preventDefault()}>{currnetLabel}</Button>
    </Dropdown>
  );
};
